import {useSettingsStoreWithOut} from "@/stores/modules/settings";
import {computed} from "vue";
import {DEFAULT_PRIMARY} from "@/config/config";
import {ElMessage} from "element-plus";
import {getDarkColor, getLightColor} from "@/utils/color";

export const useTheme= ()=>{

    const settingsStore = useSettingsStoreWithOut()
    const themeConfig = computed(()=> settingsStore.themeConfig)

    // 切换暗黑模式
    const switchDark = ()=> {
        const  body = document.documentElement as HTMLElement
        if (themeConfig.value.isDark){
            body.setAttribute('class','dark')
        }else {
            body.setAttribute('class','')
        }
    }

    const changePrimary = (val: string | null) => {
        if (!val){
            val = DEFAULT_PRIMARY
            ElMessage({
                type:'success',
                message:`主题颜色已重置为 ${DEFAULT_PRIMARY}`
            })
        }
        settingsStore.setThemeConfig({...themeConfig.value, primary: val})
        document.documentElement.style.setProperty(
            '--el-color-primary',
            themeConfig.value.primary
        )

        // 颜色加深或变浅
        // 颜色加深或变浅
        for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(
                `--el-color-primary-light-${i}`,
                themeConfig.value.isDark

                    ? `${getDarkColor(themeConfig.value.primary, i / 10)}`
                    : `${getLightColor(themeConfig.value.primary, i / 10)}`,
            )
        }
    }

    const initTheme = ()=>{
        switchDark()
    }

    return {
        initTheme,
        switchDark,
        changePrimary
    }
}